<template>
	<public-view navType="order" navTitle="订单详情" topBgShow="4" :navRight="false" navColor="#ffffff">
		<view class="content flex a-i-c f-d-c">
			<view class="goods-item-view flex f-d-c">
				<view class="top color-999 f-s-30 flex a-i-c" @click="goTo({url:'/pages/store/index?id='+item.merchant.id})">
					<image class="icon" src="@/static/images/my/gift-store999.svg" mode=""></image>
					{{item.merchant?.name}}
				</view>
				<block v-for="(itm, index) in item.goods_list" :key="index">
					<view class="goods-info flex a-i-c" @click="goTo({url:'/pages/shop/goodsInfo?id='+itm.goods_id})">
						<image class="image" :src="itm.goods_sku_product_image" mode=""></image>
						<view class="info-view">
							<view class="title f-s-26 color-333 f-w-b l-h-36">
								{{itm.goods_name||""}}
							</view>
							<view class="f-s-24" style="color: #bebebe;">
								规格{{itm.sku_text||""}}/数量{{itm.num||""}}
							</view>
						</view>
						<view class="money f-s-32 color-F32E2E f-w-b">
							<text class="f-s-24">￥</text>{{itm.goods_sku_product_price||0}}
						</view>
					</view>
				</block>
			</view>
			<view class="backmoney-view flex a-i-c j-c-b" v-if="item.refund_data">
				<view class="f-s-26 color-333 f-w-b">
					退款金额
				</view>
				<view class="color-EE8300 f-s-32 f-w-b">
					<text class="f-s-22 f-w-4">￥</text>{{item.allow_refund_amount||0}}
				</view>
			</view>
			<view class="backmoney-view flex a-i-c j-c-b" @click="chooseCancle" v-if="item.status?.buttons?.cancel">
				<view class="f-s-26 color-333 f-w-b flex a-i-c">
					<view class="" style="margin-right: 20rpx;">
						取消原因
					</view>
					<input class="f-w-4" v-model="cancle_text" :disabled="true" type="text" placeholder="请选择取消原因" />
				</view>
				<image class="next-ic" src="@/static/images/form-next.svg" mode=""></image>
			</view>
			<view class="order-info-box">
				<view class="title f-s-26 color-333 f-w-b">
					订单详情
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						下单时间
					</view>
					<view class="color-333 f-s-24 l-h-50">
						{{createtime}}
					</view>
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						订单编号
					</view>
					<view class="color-333 f-s-24 l-h-50">
						{{item.order_no||""}}
					</view>
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						付款时间
					</view>
					<view class="color-333 f-s-24 l-h-50">
						{{pay_time}}
					</view>
				</view>
				<block v-if="item.express_data">
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24" >
						<view class="left color-999 l-h-50">
							发货时间
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.express_data?.time}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24" >
						<view class="left color-999 l-h-50">
							快递公司
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.express_data?.express_name}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24" >
						<view class="left color-999 l-h-50">
							快递单号
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.express_data?.express_sn}}
						</view>
					</view>
				</block>
				
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						成交时间
					</view>
					<view class="color-333 f-s-24 l-h-50">
						{{completetime||""}}
					</view>
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						商品总价
					</view>
					<view class="color-333 f-s-24 l-h-50">
						{{item.amount||0}}
					</view>
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24" v-if="item.express_data">
					<view class="left color-999 l-h-50">
						运费
					</view>
					<view class="color-333 f-s-24 l-h-50">
						￥{{item.post_amount||0}}
					</view>
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						实付款
					</view>
					<view class="color-333 f-s-24 l-h-50">
						￥{{item.amount||0}}
					</view>
				</view>
				<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
					<view class="left color-999 l-h-50">
						备注
					</view>
					<view class="color-333 f-s-24 l-h-50">
						
					</view>
				</view>
				<block v-if="item.refund_data">
					<view class="back-money"></view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
						<view class="left color-999 l-h-50">
							退款原因
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.refund_data[0]?.user?.reason}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
						<view class="left color-999 l-h-50">
							退款金额
						</view>
						<view class="color-333 f-s-24 l-h-50">
							￥{{item.allow_refund_amount||0}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
						<view class="left color-999 l-h-50">
							退款备注
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.refund_data[0]?.user?.desc||""}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
						<view class="left color-999 l-h-50">
							申请时间
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.refund_data[0]?.createtime||""}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24">
						<view class="left color-999 l-h-50">
							审核时间
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.refund_data[0].examinetime||"审核中"}}
						</view>
					</view>
					<view class="info-item w-100 flex a-i-c j-c-b f-s-24" v-if="item.refund_data[0]?.status=== 3">
						<view class="left color-999 l-h-50">
							驳回原因
						</view>
						<view class="color-333 f-s-24 l-h-50">
							{{item.refund_data[0]?.admin?.reason||""}}
						</view>
					</view>
					<view class="w-100 flex f-w-w">
						<block v-for="(item, index) in reImages" :key="index">
							<image class="reback-image" :src="item" mode="" @click="$prviceImage(reImages)"></image>
						</block>
					</view>
				</block>
			</view>
			<view class="edit-btn-list w-100 flex j-c-e">
				<view class="item btn1 f-w-b all-center" v-if="item.status?.buttons?.express" @click="goTo({url:`/pages/order/getExpress?id=${item.id}`})">
					查看物流
				</view>
				<view class="item btn1 f-w-b all-center" v-if="item.status?.buttons?.refund"  @click="goTo({url:'/pages/order/orderBack?id='+order_id})">
					申请售后
				</view>
				<view class="item btn1 f-w-b all-center" v-if="item.status?.buttons?.del">
					删除订单
				</view>
				<view class="item btn1 f-w-b all-center" @click="cancleOrder" v-if="item.status?.buttons?.cancel">
					取消订单
				</view>
				<view class="item btn2 f-w-b all-center" @click="enterGetGoods" v-if="item.status?.buttons?.confirm">
					确认收货
				</view>
				<view class="item btn2 f-w-b all-center" v-if="item.status?.buttons?.pay" @click.stop="showPayType">
					去支付
				</view>
				<view class="item btn3 f-w-b all-center" v-if="item.status?.buttons?.comment" @click="goTo({url:'/pages/order/orderMsg?id='+order_id})">
					去评价
				</view>
			</view>
			<pay-type-popup ref="payTypePopup" :item="item" @refresh="getOrderInfo"></pay-type-popup>
		</view>
	</public-view>
</template>

<script>
	import {goTo} from "@/nav.js"
	import payTypePopup from "@/components/myComponents/payTypePopup.vue"
	import {cancleOrder} from "@/utils/pagePublic.js"
	const gettime  = (tiem)=>{
		let date = new Date(tiem)
		let yyyy = date.getFullYear()
		let mm = date.getMonth()+1<10?`0${date.getMonth()+1}`:date.getMonth()+1
		let dd = date.getDate()<10?`0${date.getDate()}`:date.getDate()
		let hh = date.getHours()<10?`0${date.getHours()}`:date.getHours()
		let MM = date.getMinutes()<10?`0${date.getMinutes()}`:date.getMinutes()
		let ss = date.getSeconds()<10?`0${date.getSeconds()}`:date.getSeconds()
		return `${yyyy}-${mm}-${dd} ${hh}:${MM}:${ss}`
	}
	export default {
		components:{
			"pay-type-popup":payTypePopup
		},
		data() {
			return {
				order_id:"",
				item:{},
				cancle_text:""
			};
		},
		computed:{
			reImages(){
				return this.item.refund_data[0]?.user?.images ||[]
			},
			createtime(){
				if(this.item.createtime){
					return gettime(this.item.createtime*1000)
				}else{
					return ""
				}
			},
			completetime(){
				if(this.item.complete_time){
					return gettime(this.item.complete_time*1000)
				}else{
					return ""
				}
			},
			pay_time(){
				if(this.item.pay_time){
					return gettime(this.item.pay_time*1000)
				}else{
					return ""
				}
			}
		},
		onLoad(o) {
			this.order_id = o.id
			if(o.btn){
				this.btn_type = o.btn
			}
			this.getOrderInfo()
		},
		methods:{
			goTo,
			enterGetGoods(item){
				let that = this
				uni.showModal({
					title:"温馨提示",
					content:"是否确认收货？",
					success(res) {
						if(res.confirm){
							that.postRequest({
								url:"v1/order/confirm",
								data:{
									order_id:that.order_id
								}
							}).then(ores=>{
								that.getOrderInfo()
								uni.showModal({
									title:"温馨提示",
									content:"是否去评价?",
									success(pres) {
										if(pres.confirm){
											that.goTo({url:"/pages/order/orderMsg?id="+that.order_id})
										}
									}
								})
							})
						}
					}
				})
			},
			chooseCancle(){
				let that = this
				let item = that.$store.state.public_config.goods[1].value
				// goods_cancel_reason
				// that.$store.state.public_config.goods[1].value
				uni.showActionSheet({
					itemList:item,
					success(res) {
						console.log(res)
						that.cancle_text = item[res.tapIndex]
					}
				})
			},
			cancleOrder(){
				let that = this
				if(that.cancle_text.length<=0){
					uni.showToast({
						title:"请选择取消原因",
						icon:"none"
					})
					return
				}
				cancleOrder({
					order_id:that.order_id,
					reason:that.cancle_text
				},()=>{
					uni.navigateBack()
				})
			},
			showPayType(){
				this.$refs.payTypePopup.show()
			},
			getOrderInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/order/info",
					data:{
						order_id:that.order_id
					}
				}).then(res=>{
					console.log(res)
					// if(res.data.express_data){
					// 	res.data.express_data = JSON.parse(res.data.express_data)
					// }
					that.item = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reback-image{
		width: 200upx;
		height: 200upx;
		margin-right: 10upx;
		margin-bottom: 10upx;
	}
	.next-ic{
		width: 20upx;
		height: 20upx;
	}
	.backmoney-view{
		width: 100%;
		background: #FFFFFF;
		padding: 16upx 30upx;
		border-radius: 20upx;
		margin-bottom: 16upx;
		height: 100upx;
	}
	.edit-btn-list{
		width: 100%;
		margin-top: 40upx;
		.item{
			width: 158upx;
			height: 58upx;
			border-radius: 30upx;
			font-size: 22upx;
		}
		.btn3{
			border: 2upx solid #2567F3;
			color: #2567F3;
		}
		.btn2{
			border: 2upx solid #EE8300;
			color: #EE8300;
		}
		.btn1{
			border: 2upx solid #CCCCCC;
			color: #666666;
			margin-right: 30upx;
		}
	}
	.order-info-box{
		width: 100%;
		background: #FFFFFF;
		padding: 50upx 40upx;
		border-radius: 20upx;
		.back-money{
			width: 100%;
			padding-top: 32upx;
			border-top: 2upx solid #f2f2f2;
		}
		.title{
			margin-bottom: 16upx;
		}
	}
	.goods-item-view{
		width: 100%;
		background: #FFFFFF;
		padding: 22upx 28upx 46upx 28upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.goods-info{
			.info-view{
				width: 354upx;
				.title{
					margin-bottom: 6upx;
				}
			}
			.image{
				width: 116upx;
				height: 116upx;
				margin-right: 26upx;
				border-radius: 8upx;
			}
		}
		.top{
			width: 100%;
			margin-bottom: 16upx;
			.icon{
				width: 40upx;
				height: 40upx;
				margin-right: 16upx;
			}
		}
	}
	.content{
		width: 100%;
		padding: 32upx 30upx;
	}
</style>
